import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import { Button, Descriptions, Tree, Empty } from 'antd';
import styles from './index.less';
import { connect } from 'umi';
import { useEffect } from 'react';
import Confirm from '@/components/common/Confirm';
import SystemDeptForm from './components/form';
import SystemDeptAuth from './components/auth';

const SystemDept = (props) => {
  const {
    SystemDeptModel: { treeData, formVisible, selectData, authVisible },
    dispatch,
  } = props;

  useEffect(() => {
    dispatch({ type: 'SystemDeptModel/listTreeEffect' });
  }, []);

  const handleRaise = () => {
    dispatch({ type: 'SystemDeptModel/formHandleReducer', payload: 'raise' });
  };

  const handleModify = () => {
    dispatch({ type: 'SystemDeptModel/formHandleReducer', payload: 'modify' });
  }

  const handleRemove = () => {
    Confirm.delete({
      content: `<p>名称为 <span style="color: #f60"> ${selectData.name} </span> 的机构部门将被删除</p><p>是否继续？</p>`,
      confirm: async () => {
        await dispatch({ type: 'SystemDeptModel/removeEffect' });
        dispatch({ type: 'SystemDeptModel/listTreeEffect' });
      },
    });
  };

  const handleAuth = () => {
    dispatch({ type: 'SystemDeptModel/changeAuthVisibleReducer', payload: true });
  }

  const HandleSelect = (selectedKeys, { selected, node }) => {
    if (selected) {
      dispatch({ type: 'SystemDeptModel/selectDataReducer', payload: node });
    }
  };

  return (
    <PageContainer className={styles.deptContainer}>
      <ProCard split="vertical">
        <ProCard
          colSpan={8}
          title={
            <Button type="primary" ghost block  onClick={() => handleRaise()}>
              {"新增部门"}
            </Button>
          }
        >
          {
            treeData && treeData.length > 0 ? 
            (
              <Tree 
                treeData={treeData} 
                selectedKeys={[selectData ? selectData.id : null]}
                onSelect={HandleSelect}
              />
            ) : (<Empty />)
          }
        </ProCard>
        {
          selectData && (
            <ProCard
              colSpan={16}
              headerBordered
              title={
                <div className={styles.deptOptions}>
                  <Button type="link" onClick={() => handleModify()}> {'修改'} </Button>
                  <Button type="link" onClick={() => handleRemove()}> {'删除'} </Button>
                  <Button type="link" onClick={() => handleAuth()}> {'授权'} </Button>
                </div>
              }
            >
              <Descriptions title="机构部门详细信息" column={3}>
                <Descriptions.Item label="部门编码">{selectData.code}</Descriptions.Item>
                <Descriptions.Item label="部门名称">{selectData.name}</Descriptions.Item>
                <Descriptions.Item label="部门简称">{selectData.simpleName}</Descriptions.Item>
                <Descriptions.Item label="区域排序">{selectData.sort}</Descriptions.Item>
                <Descriptions.Item label="所属区域">{selectData.areaName}</Descriptions.Item>
                <Descriptions.Item label="数据来源">{selectData.sources}</Descriptions.Item>
                <Descriptions.Item label="备&emsp;&emsp;注" span={3}>
                  {selectData.remark}
                </Descriptions.Item>
              </Descriptions>
            </ProCard>
          )
        }
      </ProCard>

      {formVisible && <SystemDeptForm />}

      {authVisible && <SystemDeptAuth />}
    </PageContainer>
  );
};

export default connect(({ SystemDeptModel, loading }) => ({
  SystemDeptModel,
  loading: loading.models.SystemDeptModel,
}))(SystemDept);
